<template>
    <div class="shareimgbox" :style="getBoxWidth">
        <img :src="bg_img_header" style="width:100%">
        <div class="share-desc">
            <span class="shareboxcontent">{{getTimes}}</span>
            <span class="shareboxcontent">{{getTips}}</span>
            <h3>{{getTitle}}</h3>
            <p class="shareboxcontent">{{getDesc}}</p>
        </div>
        <div>
            <img :src="bg_img_footer" style="width: 100%;" alt="">
        </div>
    </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'ShareImgBox',
  data () {
    return {
      bg_img_header: require('../assets/images/share_header.png'),
      bg_img_footer: require('../assets/images/share_footer.png')
    }
  },
  computed: {
    ...mapGetters({
      getBoxWidth: 'GetShareBoxWidth',
      getTitle: 'GetShareBoxTitle',
      getDesc: 'GetShareBoxDesc',
      getTimes: 'GetShareBoxTimes',
      getTips: 'GetShareBoxTips'
    })
  },
  methods: {
    ...mapActions({
      setBoxWidth: 'SetShareBoxWidth'
    })
  },
  mounted: function () {
    this.setBoxWidth({width: window.innerWidth + 'px'})
  }
}
</script>

<style>
.shareimgbox {
    text-align: justify;
    bottom: -9999px;
    z-index: 9999;
    background-color: #fff;
    position: fixed;
    width: 300px;
}
.shareimgbox img {
    border: 0;
    vertical-align: middle;
}
.shareimgbox .share-desc {
    margin-top: 15px;
    position: relative;
    padding-left: 40px;
    padding-right: 40px;
}
.shareimgbox .share-desc span:nth-of-type(2) {
    float:right;
}
.shareimgbox .share-bottom{
    padding-left: 0;
    padding-right: 0;
}
.share-desc h3{
font-size:20px;
font-weight:700;
}
.shareboxcontent{font-size: 18px;}
</style>
